<link rel="stylesheet" href="http://tv.speechb.com/blog/css/base-1.2.css?v=1.0.2"/>
<!--<link rel="stylesheet" href="/static/web/css/base-1.2.css?v=1.0.1"/>-->
<link href="http://tv.speechb.com/lib/superui/content/ui/global/font-awesome/css/font-awesome.css" rel="stylesheet" />
<header  class="test">
    <div style="height: 20rem;" class="weather">
        &nbsp;
        <div>
            <ul class="site-nav site-navbar visible-lg visible-md visible-sm">
                <li class="item common">
                    <a href="/"> <i class="fa fa-home"></i> 首页</a>
                </li>
                <li class="item common" th:each="menu:${menus}">
                    <a> <i th:class = "${menu.icon}"></i><th:block th:text="' ' + ${menu.name} +' '"></th:block> <i class="fa fa-angle-down"></i></a>
                    <ul class="sub-menu">
                        <li  th:each="sonMenu:${menu.menuList}">
                            <a th:href="${sonMenu.status}=='1' ? ${sonMenu.id} : ${sonMenu.url}"> <th:block th:text = "${sonMenu.name}"></th:block></a>
                        </li>
                    </ul>
                </li>
                <li class="item common">
                    <a href="/login" target="_blank" style="margin-right: 60px"> <i class="fa fa-user"></i> <span id="login_info">&nbsp;登录</span> </a>
                    <ul class="sub-menu" id="login_menu" style="visibility: hidden">
                        <li><a href="/publish"><i class="fa fa-pencil-square-o"></i>&nbsp;发布文章</a></li>
                        <li><a href="/owner"><i class="fa fa-align-center"></i>&nbsp;个人文章</a></li>
                        <li id="logout"><a><i class="fa fa-sign-out"></i> 退出登录</a></li>
                    </ul>
                </li>

            </ul>
        </div>

        <div class="visible-xs" style="text-align: center">
            <i id="mobile-nav-taggle" style="float: left;color: white;padding: 0 12px 12px 12px;z-index: 999" class="fa fa-bars"></i>
            <img src="http://blog.speechb.com/blog/image/mblog.png" style="height: 32px;margin: 0 auto;">
        </div>
        <div class="m-mask"></div>
        <!--手机导航栏-->
        <div id="mobile-menu" style="z-index: 999;display: block;left: -70%;" class="mobile-nav visible-xs ">
            <ul style="margin: 0px">
                <li> <a href="/"> <i class="fa fa-home"></i> 首页</a></li>
                <li><a href="/fds"> <i class="fa fa-star"></i> 技术教程 </a></li>
                <li> <a href="/sort/9"> <i class="fa fa-th-large"></i> BUG收集 </a></li>
                <li><a href="/sort/5"> <i class="fa fa-reorder"></i> 在线工具 </a></li>
                <li><a href="/sort/11"> <i class="fa fa-magic"></i> 资源下载 </a></li>
                <li>
                    <a href="/sort/11"> <i class="fa fa-user"></i> 登录 </a>
                    <ul class="sub-menu" style="visibility: visible">
                        <li><a href="/publish"><i class="fa fa-pencil-square-o"></i>&nbsp;发布文章</a></li>
                        <li><a><i class="fa fa-sign-out"></i> 退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <!--search start-->
        <form action="/search" method="get" style="margin: 6rem auto 0 auto" class="search b-r-4 uk-form uk-flex uk-position-relative uk-padding">
            <input id="searchinput" th:value = "${keyword}" name="keyword" class="uk-input uk-text-small shadow" type="text" placeholder="博客搜索" autocomplete="off">
            <button class="uk-text-bold" type="submit">搜索</button>
        </form>
        <!--search end-->
    </div>
    <script src="http://tv.speechb.com/lib/superui/content/ui/global/jQuery/jquery.min.js"></script>
    <script type="text/javascript">
        var isHide = true;
        $("#mobile-nav-taggle").click(function () {
            taggle();
        })
        $(".m-mask").click(function () {
            taggle();
        })
        function taggle() {
            var mobileMenu = $("#mobile-menu");
            if (isHide) {
                mobileMenu.animate({left:'0px'})
                $(".m-mask").show()
            } else {
                mobileMenu.animate({left:'-70%'})
                $(".m-mask").hide()
            }
            isHide = !isHide;
        }
    </script>
</header>